<template>
  <div class="list">
    <!-- 加载loading -->
    <div class="loading" v-if="loading">
      <div class="loading-icon">
        <mu-circular-progress class="demo-circular-progress" color="secondary" :size="36"></mu-circular-progress>
        <div class="font">加载中，请稍等</div>
      </div>
    </div>
    <div class="navbar">
      <!-- 选择框 -->
      <div class="navbar-select">
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/ls.png?x-oss-process=image/quality,Q_70"
          alt=""
          @click="LinkTo('/historical')"
        >
        <!-- <mu-select v-model="sity" full-width>
        <mu-option v-for="option in options" :key="option.index" :label="option.name" :value="option"></mu-option>
        </mu-select>-->
        <select name="selectAge" id="selectAge" ref="inputDivision" @change="handleClick">
          <option
            v-for="(option, index) in options"
            :value="option.id"
            :key="option.index"
            :id="'addr'+option.id"
            :data-index="index"
            :data-id="option.id"
          >{{option.name || null}}</option>
        </select>
      </div>
      <!-- 榜单 -->
      <div class="list-bar">
        <!-- 第二名 -->
        <mu-paper class="demo-paper" :z-depth="2">
          <div class="top">
            <div class="top-img">
              <div class="img">
                <img :src="secondImg" alt="">
              </div>
            </div>
            <div class="top-num">
              <font>{{secondTicket || null}}</font>票
            </div>
            <div class="top-name">
              <font>{{secondName || null}}</font>
              <font>{{secondPoint || null}}号</font>
            </div>
          </div>
        </mu-paper>
        <!-- 第一名 -->
        <mu-paper class="demo-paper" :z-depth="5">
          <div class="top-1">
            <div class="top-img">
              <div class="img">
                <img :src="firstImg" alt="">
              </div>
            </div>
            <div class="top-num">
              <font>{{firstTicket || null}}</font>票
            </div>
            <div class="top-name">
              <font>{{firstName || null}}</font>
              <font>{{firstPoint || null}}号</font>
            </div>
          </div>
        </mu-paper>
        <!-- 第三名 -->
        <mu-paper class="demo-paper" :z-depth="2">
          <div class="top-2">
            <div class="top-img">
              <div class="img">
                <img :src="thirdImg" alt="">
              </div>
            </div>
            <div class="top-num">
              <font>{{thirdTicket || null}}</font>票
            </div>
            <div class="top-name">
              <font>{{thirdName || null}}</font>
              <font>{{thirdPoint || null}}号</font>
            </div>
          </div>
        </mu-paper>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="list-navbar">
      <mu-container>
        <mu-tabs
          :value.sync="active1"
          inverse
          color="secondary"
          text-color="rgba(0, 0, 0, .54)"
          center
        >
          <mu-tab @click="weekList">周榜</mu-tab>
          <mu-tab @click="monthList">月榜</mu-tab>
          <mu-tab @click="allList">总榜</mu-tab>
        </mu-tabs>
        <!-- 周榜 -->
        <div class="demo-text" v-if="active1 === 0">
          <div
            class="demo-item"
            v-for="(week,index) in weeks"
            :key="week.index"
            @click="jumpTo('/personal',week.id)"
          >
            <div class="item-num">{{index+1 || null}}</div>
            <div class="item-img">
              <div class="img">
                <img :src="week.after_image || null" alt="">
              </div>
            </div>
            <div class="item-name">{{week.name || null}}</div>
            <div class="item-page">
              <div class="item-page-text">
                <font>{{week.num || null}}</font>票
              </div>
              <font>{{week.id || null}}号</font>
            </div>
          </div>
        </div>
        <!-- 月榜 -->
        <div class="demo-text" v-if="active1 === 1">
          <div
            class="demo-item"
            v-for="(month,index) in months"
            :key="month.index"
            @click="jumpTo('/personal',month.id)"
          >
            <div class="item-num">{{index+1 || null}}</div>
            <div class="item-img">
              <div class="img">
                <img :src="month.after_image || null" alt="">
              </div>
            </div>
            <div class="item-name">{{month.name || null}}</div>
            <div class="item-page">
              <div class="item-page-text">
                <font>{{month.num || null}}</font>票
              </div>
              <font>{{month.id || null}}号</font>
            </div>
          </div>
        </div>
        <!-- 总榜 -->
        <div class="demo-text" v-if="active1 === 2">
          <div
            class="demo-item"
            v-for="(all,index) in alls"
            :key="all.index"
            @click="jumpTo('/personal',all.id)"
          >
            <div class="item-num">{{index+1 || null}}</div>
            <div class="item-img">
              <div class="img">
                <img :src="all.after_image || null" alt="">
              </div>
            </div>
            <div class="item-name">{{all.name || null}}</div>
            <div class="item-page">
              <div class="item-page-text">
                <font>{{all.vote_num || null}}</font>票
              </div>
              <font>{{all.id || null}}号</font>
            </div>
          </div>
        </div>
      </mu-container>
    </div>
    <!-- 底部导航 -->
    <bottomBar :toSelected="proValue"></bottomBar>
  </div>
</template>
<script>
import bottomBar from "../components/bottomBar.vue";
import http from "../utils/http";
export default {
  name: "list",
  data() {
    return {
      sity: "",
      // storageAddr: '',
      addressId: "",
      addressIndex: "",
      index: 1,
      options: [],
      proValue: "List",
      active1: 1,
      months: [],
      weeks: [],
      alls: [],
      firstImg: "",
      firstTicket: "",
      firstName: "",
      firstPoint: "",
      secondImg: "",
      secondTicket: "",
      secondName: "",
      secondPoint: "",
      thirdImg: "",
      thirdTicket: "",
      thirdName: "",
      thirdPoint: "",
      loading: false
    };
  },
  components: { bottomBar },
  methods: {
    jumpTo: function(link, index) {
      // console.log('event',event)
      // console.log('link', link);
      // console.log(link,index);
      // return false
      this.$router.push({
        path: link,
        query: {
          candidates_id: index
        }
      });
    },
    handleClick: function(event) {
      this.loading = true;
      var dataId = event.target.value;
      var addrName = document.getElementById("addr" + dataId);
      var addrIndex = addrName.getAttribute("data-index");
      console.log("addrName", addrName);
      console.log("innerHtml", event);
      console.log("addrIndex", addrIndex);
      console.log("this.$ref.", this.$refs.inputDivision);
      // console.log("dataId", dataId);
      localStorage.setItem("storageAddrIndex", addrIndex);
      localStorage.setItem("storageAddr", dataId);
      // localStorage.setItem('storageAddr', dataId)
      this.addressId = dataId;
      console.log("dataId", dataId);
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId,
            sortlist_type: 2
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          console.log("response", response);
          if (response.errcode == 0) {
            if (response.data.length >= 3) {
              // that.weeks = response.data;
              that.months = response.data;
              // that.alls = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = response.data[2].after_image;
              that.thirdTicket = response.data[2].num;
              that.thirdName = response.data[2].name;
              that.thirdPoint = response.data[2].id;
            } else if (response.data.length >= 2) {
              that.months = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = response.data[1].after_image;
              that.secondTicket = response.data[1].num;
              that.secondName = response.data[1].name;
              that.secondPoint = response.data[1].id;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else if (response.data.length >= 1) {
              that.months = response.data;
              that.firstImg = response.data[0].after_image;
              that.firstTicket = response.data[0].num;
              that.firstName = response.data[0].name;
              that.firstPoint = response.data[0].id;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            } else {
              that.months = response.data;
              that.firstImg = null;
              that.firstTicket = null;
              that.firstName = null;
              that.firstPoint = null;
              that.secondImg = null;
              that.secondTicket = null;
              that.secondName = null;
              that.secondPoint = null;
              that.thirdImg = null;
              that.thirdTicket = null;
              that.thirdName = null;
              that.thirdPoint = null;
            }
            that.loading = false;
          }
          that.active1 = 1;
          // that.weekList()
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false;
        });
    },
    weekList: function() {
      this.loading = true;
      // console.log('周榜')
      // 榜单
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId,
            sortlist_type: 3
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("周榜", response);
          // console.log("data长度", response.data.length);
          if (response.data.length >= 3) {
            that.weeks = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = response.data[2].after_image;
            that.thirdTicket = response.data[2].num;
            that.thirdName = response.data[2].name;
            that.thirdPoint = response.data[2].id;
          } else if (response.data.length >= 2) {
            that.weeks = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else if (response.data.length >= 1) {
            that.weeks = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else {
            that.weeks = response.data;
            that.firstImg = null;
            that.firstTicket = null;
            that.firstName = null;
            that.firstPoint = null;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          }
          that.loading = false;
        })
        .catch(function(error) {
          that.loading = false;
          // console.log("error", error);
        });
    },
    monthList: function() {
      this.loading = true;
      // console.log('月榜')
      // 榜单
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId,
            sortlist_type: 2
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("月榜", response);
          // console.log("data长度", response.data.length);
          if (response.data.length >= 3) {
            that.months = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = response.data[2].after_image;
            that.thirdTicket = response.data[2].num;
            that.thirdName = response.data[2].name;
            that.thirdPoint = response.data[2].id;
          } else if (response.data.length >= 2) {
            that.months = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else if (response.data.length >= 1) {
            that.months = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else {
            that.months = response.data;
            that.firstImg = null;
            that.firstTicket = null;
            that.firstName = null;
            that.firstPoint = null;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          }
          that.loading = false;
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false;
        });
    },
    allList: function() {
      this.loading = true;
      // console.log("总榜");
      // 榜单
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            division_id: this.addressId,
            sortlist_type: 1
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectListSortData"
        })
        .then(function(response) {
          // console.log("总榜", response);
          // console.log("data长度", response.data.length);
          if (response.data.length >= 3) {
            that.alls = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].vote_num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].vote_num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = response.data[2].after_image;
            that.thirdTicket = response.data[2].vote_num;
            that.thirdName = response.data[2].name;
            that.thirdPoint = response.data[2].id;
          } else if (response.data.length >= 2) {
            that.alls = response.data;
            that.firstImg = response.data[0].after_image;
            that.firstTicket = response.data[0].vote_num;
            that.firstName = response.data[0].name;
            that.firstPoint = response.data[0].id;
            that.secondImg = response.data[1].after_image;
            that.secondTicket = response.data[1].vote_num;
            that.secondName = response.data[1].name;
            that.secondPoint = response.data[1].id;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else if (response.data.length >= 1) {
            that.alls = response.data;
            that.thirdImg = response.data[0].after_image;
            that.thirdTicket = response.data[0].vote_num;
            that.thirdName = response.data[0].name;
            that.thirdPoint = response.data[0].id;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          } else {
            that.alls = response.data;
            that.firstImg = null;
            that.firstTicket = null;
            that.firstName = null;
            that.firstPoint = null;
            that.secondImg = null;
            that.secondTicket = null;
            that.secondName = null;
            that.secondPoint = null;
            that.thirdImg = null;
            that.thirdTicket = null;
            that.thirdName = null;
            that.thirdPoint = null;
          }
          that.loading = false;
        })
        .catch(function(error) {
          // console.log("error", error);
          that.loading = false;
        });
    },
    // 路由跳转
    LinkTo: function(link) {
      this.$router.push({ path: link });
    }
  },
  created() {
    this.loading = true;
    // 下拉列表
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    http
      .post("Zmhf/index", {
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectDivisionData"
      })
      .then(function(response) {
        if (response.status == 0) {
          that.$router.push({
            path: "/"
          });
        }
        // console.log("下拉列表",response)
        // console.log("response", response);
        that.options = response.data;
        // that.options = [{id: "28", name: "其他赛区"}, {id: "27", name: "贵州赛区"}, {id: "26", name: "山西赛区"}, {id: "25", name: "海南赛区"}, {id: "24", name: "福建赛区"}]
        if (localStorage.getItem("storageAddr")) {
          var storageAddr = localStorage.getItem("storageAddr");
          var optionsLen = that.options.length;
          for (var i = 0; i < optionsLen; i++) {
            if (that.options[i].id === storageAddr) {
              var tmpOption = that.options.splice(i, 1);
              that.options.unshift(tmpOption[0]);
            }
          }
        }
        console.log("that.options", that.options);
        /*if (localStorage.getItem('storageAddrIndex')) {
          that.addressIndex = localStorage.getItem('storageAddrIndex')
          var tmpOption = that.options.splice(+that.addressIndex, 1)
          console.log('options1', tmpOption)
          console.log('options2', tmpOption[0])
          that.options.unshift(tmpOption[0])
          console.log('options2', that.options)
          // that.options[that.addressIndex]
        }*/

        that.sity = response.data[0];
      })
      .catch(function(error) {
        // console.log(error);
      });
    // 榜单
    if (localStorage.getItem("storageAddr")) {
      this.addressId = localStorage.getItem("storageAddr");
    }
    http
      .post("Zmhf/index", {
        data: {
          division_id: this.addressId,
          sortlist_type: 2
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectListSortData"
      })
      .then(function(response) {
        // console.log("月榜", response);
        if (response.data.length >= 3) {
          that.months = response.data;
          that.firstImg = response.data[0].after_image;
          that.firstTicket = response.data[0].num;
          that.firstName = response.data[0].name;
          that.firstPoint = response.data[0].id;
          that.secondImg = response.data[1].after_image;
          that.secondTicket = response.data[1].num;
          that.secondName = response.data[1].name;
          that.secondPoint = response.data[1].id;
          that.thirdImg = response.data[2].after_image;
          that.thirdTicket = response.data[2].num;
          that.thirdName = response.data[2].name;
          that.thirdPoint = response.data[2].id;
        } else if (response.data.length >= 2) {
          that.months = response.data;
          that.firstImg = response.data[0].after_image;
          that.firstTicket = response.data[0].num;
          that.firstName = response.data[0].name;
          that.firstPoint = response.data[0].id;
          that.secondImg = response.data[1].after_image;
          that.secondTicket = response.data[1].num;
          that.secondName = response.data[1].name;
          that.secondPoint = response.data[1].id;
        } else if (response.data.length >= 1) {
          that.months = response.data;
          that.firstImg = response.data[0].after_image;
          that.firstTicket = response.data[0].num;
          that.firstName = response.data[0].name;
          that.firstPoint = response.data[0].id;
        } else {
          that.months = response.data;
        }
        that.loading = false;
      })
      .catch(function(error) {
        that.loading = false;
        // console.log("error", error);
      });
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    width: 100%;
    height: 95%;
    z-index: 3000;

    .loading-icon {
      width: 100%;

      .font {
        display: block;
        width: 100%;
        color: #ff3f81;
        font-weight: 500;
        font-size: 13px;
      }
    }
  }

  .navbar {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 17rem;
    background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/bgImges.png?x-oss-process=image/quality,Q_70");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .navbar-select {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 1rem 0 0 0;
      width: 100%;
      height: 2rem;

      img {
        margin-left: 1rem;
        width: 2.5rem;
        height: 2.5rem;
      }

      select {
        padding-left: 1rem;
        width: 7rem;
        height: 100%;
        outline: none;
        border: 0;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        color: red;
        background-color: rgba(226, 204, 204, 0.6);
      }
    }

    .list-bar {
      display: inline-flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      height: 12rem;

      .demo-paper {
        width: 7rem;
        height: 10rem;

        &:nth-of-type(1) {
          border-top-left-radius: 1rem;
          border-bottom-left-radius: 1rem;
        }

        &:nth-of-type(2) {
          height: 11.5rem;
          border-top-left-radius: 1rem;
          border-top-right-radius: 1rem;
        }

        &:nth-of-type(3) {
          border-top-right-radius: 1rem;
          border-bottom-right-radius: 1rem;
        }

        .top {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;

          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/2.png");
            background-repeat: no-repeat;
            background-size: 3.5rem;
            background-position: center;
            overflow: hidden;

            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 3.2rem;
              height: 3.2rem;
              border-radius: 5rem;
              overflow: hidden;

              img {
                width: 100%;
                overflow: hidden;
                object-fit: cover;
              }
            }
          }

          .top-num {
            width: 100%;
            font-size: 0.8rem;

            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }

          .top-name {
            width: 100%;

            font {
              display: block;
              font-size: 0.9rem;

              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }

        .top-1 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;

          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 6.5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/1.png");
            background-repeat: no-repeat;
            background-size: 4.5rem;
            background-position: center;

            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 4.25rem;
              height: 4.25rem;
              border-radius: 5rem;
              overflow: hidden;

              img {
                width: 100%;
                overflow: hidden;
                object-fit: cover;
              }
            }
          }

          .top-num {
            width: 100%;
            font-size: 0.8rem;

            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }

          .top-name {
            width: 100%;

            font {
              display: block;
              font-size: 0.9rem;

              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }

        .top-2 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;

          .top-img {
            margin-top: 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/3.png");
            background-repeat: no-repeat;
            background-size: 3.5rem;
            background-position: center;

            .img {
              position: absolute;
              bottom: 0.1rem;
              width: 3.2rem;
              height: 3.2rem;
              border-radius: 5rem;
              overflow: hidden;

              img {
                width: 100%;
                overflow: hidden;
                object-fit: cover;
              }
            }
          }

          .top-num {
            width: 100%;
            font-size: 0.8rem;

            font {
              color: #ff6464;
              font-size: 1.2rem;
            }
          }

          .top-name {
            width: 100%;

            font {
              display: block;
              font-size: 0.9rem;

              &:nth-of-type(2) {
                color: #aaa;
              }
            }
          }
        }
      }
    }
  }

  .list-navbar {
    width: 100%;

    .demo-text {
      margin-bottom: 5rem;

      .demo-item {
        margin-top: 1rem;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;

        .item-num {
          width: 2rem;
          text-align: center;
          font-size: 1rem;
        }

        .item-img {
          width: 5rem;

          .img {
            width: 3rem;
            height: 3rem;
            border-radius: 3rem;
            overflow: hidden;

            &:nth-of-type(1) {
              border: 0.1rem solid #e3c77a;
            }

            &:nth-of-type(2) {
              border: 0.1rem solid #fcd0f0;
            }

            &:nth-of-type(3) {
              border: 0.1rem solid #adc6ef;
            }

            img {
              width: 100%;
              overflow: hidden;
              object-fit: cover;
            }
          }
        }

        .item-name {
          width: 9rem;
          text-align: left;
          color: #000;
          font-weight: 500;
          font-size: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-page {
          width: 8rem;
          text-align: right;
          color: #a1a1a1;
          font-size: 0.8rem;

          .item-page-text {
            font {
              font-size: 1.2rem;
              color: #ff6464;
            }
          }
        }
      }
    }
  }
}
</style>